<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>编辑商品</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-form :model="goodsForm" :rules="goodsFormRules" ref="goodsFormRef" label-position="left" label-width="80px">
                <el-form-item label="商品名称" prop="goods_name">
                    <el-input disabled v-model="goodsForm.goods_name"></el-input>
                </el-form-item>
                <el-form-item label="商品价格" prop="goods_price">
                    <el-input type="number" v-model="goodsForm.goods_price"></el-input>
                </el-form-item>
                <el-form-item label="商品数量" prop="goods_number">
                    <el-input type="number" v-model="goodsForm.goods_number"></el-input>
                </el-form-item>
                <el-form-item label="商品重量" prop="goods_weight">
                    <el-input type="number" v-model="goodsForm.goods_weight"></el-input>
                </el-form-item>
                <el-form-item label="商品介绍">
                    <el-input v-model="goodsForm.goods_introduce">
                    </el-input>
                </el-form-item>
                <el-form-item label="商品图片">
                    <el-image style="width: 250px;height: 250px" fit="contain" v-for="(item,index) in imgSrc" :key="index" :src="item"></el-image>
                </el-form-item>
                <el-form-item label="上传图片">
                    <el-upload :action="upLoadUrl" :on-remove="handleRemove" list-type="picture" :headers="headerObj" :on-success="handleSuccess">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>    
                    </el-upload>
                </el-form-item>
                <el-form-item label="静态属性">
                    <el-form-item label-width="150px" v-for="item in onlyTable" :key="item.attr_id" :label="item.attr_name">
                        <el-input v-model="item.attr_vals"></el-input>
                    </el-form-item>
                </el-form-item>
                <el-form-item label="动态参数">
                    <el-form-item label-width="150px" v-for="item in manyTable" :key="item.attr_id" :label="item.attr_name">
                        <el-input v-model="item.attr_vals"></el-input>
                    </el-form-item>
                </el-form-item>
                <el-button type="primary" style="margin-left: 50%" @click="handleclick">提交</el-button>
            </el-form>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "edit",
        data(){
            return{
                upLoadUrl: 'http://120.27.246.168:8888/api/private/v1/upload',
                headerObj:{
                    Authorization:window.sessionStorage.getItem('token')
                },
                goodsForm:{
                    goods_name:'',
                    goods_cat:'',
                    goods_price:0,
                    goods_number:0,
                    goods_weight:0,
                    goods_introduce:'',
                    //打算提交的图片地址
                    pics:[],
                    attrs:[]
                },
                //图片地址
                imgSrc:[],
                goodsFormRules:{
                    goods_name:[{required:true,message:'商品名称不能为空',trigger:'blur'}],
                    goods_price:[{required:true,message:'商品价格不能为空',trigger:'blur'}],
                    goods_number:[{required:true,message:'商品数量不能为空',trigger:'blur'}],
                },
                //当前商品的数据
                goodData:[],
            //    静态属性
                onlyTable:[],
                //动态参数
                manyTable:[]
            }
        },
        created() {
            this.queryGood()
            
        },
        methods:{
            //查询当前商品的数据
            queryGood(){
                this.$http.get('goods/'+this.$route.query.id).then(res=>{
                    this.goodData=res.data.data
                    console.log(this.goodData)
                    this.goodsForm.goods_cat=this.goodData.cat_one_id+','+this.goodData.cat_two_id+','+this.goodData.cat_three_id
                    this.goodsForm.goods_name=res.data.data.goods_name
                    this.goodsForm.goods_price=res.data.data.goods_price
                    this.goodsForm.goods_number=res.data.data.goods_number
                    this.goodsForm.goods_weight=res.data.data.goods_weight
                    this.goodsForm.goods_introduce=res.data.data.goods_introduce
                    res.data.data.pics.forEach(item=>{
                       this.imgSrc.push(item.pics_sma_url.replace('127.0.0.1','120.27.246.168')) 
                    })
                }).then(()=>{
                    this.$http.get('categories/'+this.goodData.cat_three_id+'/attributes',{params:{sel:'only'}}).then(res=>{
                        this.onlyTable=res.data.data
                    })
                }).then(()=>{
                    this.$http.get('categories/'+this.goodData.cat_three_id+'/attributes',{params:{sel:'many'}}).then(res=>{
                        this.manyTable=res.data.data
                    })
                })
            },
            //处理图片取消事件
            handleRemove(file){
                const i=this.goodsForm.pics.findIndex((item)=>{
                    item.pic===file.response.data.tmp_path
                })
                this.goodsForm.pics.splice(i,1)
            },
            //处理图片上传成功事件
            handleSuccess(res){
                const picInfo={pic:res.data.tmp_path}
                this.goodsForm.pics.push(picInfo)
            },
            //处理提交
            handleclick(){
                this.$refs.goodsFormRef.validate((res)=>{
                    if (!res){
                        this.$message.error('请填写必要的表单项')
                    }else {
                        //处理动态参数
                        this.manyTable.forEach(item=>{
                            const picInfo={attr_id:item.attr_id,attr_value:item.attr_vals}
                            this.goodsForm.attrs.push(picInfo)
                        })
                        //处理静态参数
                        this.onlyTable.forEach(item=>{
                            const picInfo={attr_id:item.attr_id,attr_value:item.attr_vals}
                            this.goodsForm.attrs.push(picInfo)
                        })
                        console.log(this.goodsForm)
                        this.$http.put('goods/'+this.goodData.goods_id,this.goodsForm).then(res=>{
                            console.log(res)
                            if (res.data.meta.status!==200){
                                this.$message.error('修改商品失败')
                            }else{
                                this.$message.success('修改商品成功')
                                this.$router.push('/goods')
                            }
                        })
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>
